<template>
	<a-table :columns="columns" :data-source="data" size="small" rowKey="id">
		<template #title>
			<p style="text-align: left">
				<a-button :icon="h(PlusOutlined)" type="primary" @click="open = true">上传人员名单</a-button>
			</p>
		</template>

		<template #bodyCell="scope">
			<template v-if="scope.column.key === 'operation' && scope.text.children.length">
				<a-button :icon="h(DeleteOutlined)" type="link" @click="deleteDept(scope)">删除</a-button>
			</template>
		</template>
	</a-table>

	<!-- 增删改查弹框  -->
	<a-modal v-model:open="open" :destroyOnClose="true" :footer="null" :maskClosable="false" title="上传人员文件"
		cancel-text="取消" ok-text="确定" @cancel="handleCancel">
		<a-spin :spinning="spinning" tip="Loading...">
			<a-form :label-col="{ span: 8 }" :model="form" :wrapper-col="{ span: 16 }" autocomplete="off" name="basic"
				@submit="handleOk">
				<a-upload-dragger v-model:fileList="form.fileList" name="file" :multiple="true" action="ht"
					@change="handleChange" :before-upload="() => { return false }">
					<p class="ant-upload-drag-icon">
						<inbox-outlined></inbox-outlined>
					</p>
					<p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
					<p class="ant-upload-hint">
						请上传word文件或者压缩包
					</p>
				</a-upload-dragger>
				<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
					<a-button @click="handleCancel">取消</a-button>
					&nbsp;&nbsp;
					<a-button html-type="submit" type="primary">确定</a-button>
				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>

</template>
<script setup>
import { ipcApiRoute } from '@/api/main';
import { ipc } from '@/utils/ipcRenderer';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { h, onMounted, ref } from 'vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';

const form = ref({})
const spinning = ref(false);
const columns = [
	{
		title: '机构名称',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '操作',
		width: '300px',
		key: 'operation'
	},
];
const data = ref([]);
const open = ref(false)

let currentDept = null
let file = null

function handleChange(e) {
	file = e.file
}
// 弹框
async function handleOk() {
	spinning.value = true
	const fileData = await readFIle(file);
	let res = await ipc.invoke(ipcApiRoute.uploadExcel, {
		file: fileData,
		fileName: file.name
	})
	handleCancel()
	spinning.value = false
	open.value = false
	init()
}


function handleCancel() {
	currentDept = null
	form.value = {}
	open.value = false
}
onMounted(() => {
	init()
})

async function init() {
	let res = await ipc.invoke(ipcApiRoute.getAllDepts, {})
	console.log(res)
	data.value = res.data
}

function readFIle(file) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsArrayBuffer(file);
		reader.onload = async () => {
			resolve(reader.result)
		};
	})
}

const delOpen = ref(false)

function deleteDept(scope) {
	Modal.confirm({
		title: '确定要删除该单位，同时删除该单位下的所有部门和人员信息？',
		content: createVNode(
			'div',
			{
				style: 'color:red;',
			},
			'此操作不可逆，请谨慎操作！',
		),
		okText: '确定',
		okType: 'danger',
		cancelText: '取消',
		onOk() {
			let id = scope.value.id
			ipc.invoke(ipcApiRoute.deleteDept, { id }).then(res => {
				init()
			})
		},
		onCancel() {
			console.log('Cancel');
		},
		class: 'test',
	});
}

// function handleDelOk() {

// 	delOpen.value = false
// }
</script>
